import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';
import { Selection } from '@antv/x6-plugin-selection';
import { Clipboard } from '@antv/x6-plugin-clipboard';
import { Keyboard } from '@antv/x6-plugin-keyboard';
import { History } from '@antv/x6-plugin-history';
import { ports } from './registerNode';
import frozenMach from '../../../../public/canvas-board/frozenMach.png';
console.log(ports);
export default function TestCanvas(){
    let containerRef = useRef();
    useEffect(()=>{
        let graph = new Graph({
            container:containerRef.current,
            width:containerRef.current.offsetWidth,
            height:containerRef.current.offsetHeight,
            mousewheel:{
                enabled:true,
                modifiers:['ctrl', 'meta']
            },
            // interacting:{
            //     edgeMovable:false,
            // },
              
            // 配置节点连接桩的交互属性
            
            autoResize:true
        });
        graph.use(
            new Selection({
                enabled:true,
                multiple:true,
                rubberband:true,
                showNodeSelectionBox:true
            })
        )
        graph.use(
            new Clipboard({
                enabled:true
            })
        )
        graph.use(
            new Keyboard({
                enabled:true
            })
        )
        graph.use(
            new History({
                enabled:true,
                stackSize:5
            })
        )
        graph.addNode({
            shape:'image',
            x: 320,
            y: 100,
            width: 100,
            height: 40,
            label: 'Rect',
            attrs: {
                image:{ 'xlink:href': frozenMach },
              body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
              },
            },
            ports:{ ...ports },
            tools:[
                {
                    name:'node-editor',
                    args:{
                        attrs:{ color:'#fff', backgroundColor:'rgba(0, 0, 0, 0.45)' },
                    }
                },
                {
                    name:'button-remove',
                    args:{
                        x:'100%',
                        y:0
                    }
                }
            ]
        })
        graph.addNode({
            x: 520,
            y: 300,
            width: 100,
            height: 40,
            label: 'Rect',
            attrs: {
              body: {
                stroke: '#8f8f8f',
                strokeWidth: 1,
                fill: '#fff',
                rx: 6,
                ry: 6,
              },
            },
        })
        graph.bindKey('ctrl+c',()=>{
            const cells = graph.getSelectedCells();
            if ( cells.length ) {
                graph.copy(cells);
            } else {
                return false;
            }
        })
        graph.bindKey('ctrl+v',()=>{
            if ( !graph.isClipboardEmpty() ){
                const cells = graph.paste({ offset:32 });
                graph.cleanSelection();
                graph.select(cells);
            }
        });
        graph.bindKey('ctrl+z',()=>{
            graph.undo();
        })
        graph.centerContent();
        setTimeout(()=>{
            console.log(graph.getNodes());
        },1000)
        return ()=>{

        }
    },[])
    
    return (
        
        <div ref={containerRef} style={{ width:'100%', height:'100%', position:'relative' }} ></div>
    )
}